import React from "react";

import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import { useTranslation } from "react-i18next";

const ErrorBox = () => {
  const errorBoxImg = require("./../../assets/images/VerifyErrorBox/file.svg");
  const { t } = useTranslation();
  return (
    <>
      <Card className="card-box bg-neutral-warning  error-box-container">
        <div className="d-block text-center text-lg-left d-lg-flex align-items-center justify-content-between">
          <div className="d-flex align-items-center">
            <div
              className="d-none d-xl-flex align-items-center"
              style={{ width: "160px" }}
            >
              <img alt="..." className="d-block img-fluid" src={errorBoxImg} />
            </div>
            <div className="px-3">
              <h4 className="font-size-xl font-weight-bold mb-2">
                {t("dashboard:verify_ErrorBox_title")}
              </h4>
              <p className="box-desc opacity-6 font-size-md mb-0">
                {t("dashboard:verify_ErrorBox_content")}
              </p>
            </div>
          </div>
          <Button
            size="small"
            className="py-2 ml-2 px-4 mr-lg-2 mt-3 mt-lg-0 text-nowrap btn-warning"
          >
            <span className="btn-wrapper--label text-uppercase font-weight-bold aling-items-center">
              {t("buttons:complete_now")}
            </span>
          </Button>
        </div>
      </Card>
    </>
  );
};

export default ErrorBox;
